<script setup lang="ts">
import {reactive, ref, onMounted} from 'vue'
import tableList from "@/components/tableList/tableList.vue";
import {useRouter} from 'vue-router'
import {useDevice} from '@/hooks/web/useDevice'
import {dataList, visitorEdit} from "@/api/backlog";
import {useCommon} from "@/hooks/web/useCommon";
import {ElMessage, ElMessageBox} from "element-plus";
import {useStorage} from "@/hooks/web/useStorage";

const {getStorage, setStorage, removeStorage} = useStorage()
onMounted(() => {
  let flag = getStorage('backlogFlag')
  let searchItem = getStorage('backlogForm');
  if (flag && searchItem) {
    pageData.currentPage = searchItem.page
    pageData.pageSize = searchItem.limit
    searchForm = Object.assign(searchForm, searchItem)
  } else {
    sessionStorage.removeItem('backlogForm')
  }
  getTeacher('')
  fetchData()
  gatherOptions()
  getProjectTree('tree')
})

onBeforeUnmount(() => {
  removeStorage('backlogFlag')
})

let {
  pageData,
  loading,
  optionsBox,
  gatherOptions,
  teacherOptions,
  getTeacher,
  projectTree,
  getProjectTree,
  searchForm
} = useCommon()
const {mobile} = useDevice()
const router = useRouter()
const mobileShow = ref(false)
let tableData = ref([])
const tableHeader = reactive([
  {
    label: '报考院校', prop: 'school_name'
  },
  {label: '系统时间', prop: 'created_time', width: '170px',},
  {
    label: '学生姓名', prop: 'realname', type: 'btn', method: (row) => {
      handleDetail(row)
    }
  },
  {label: '待办事项', prop: 'todo_name', link: 'project_id', type: 'select', options: []},
  {
    label: '回访时间', prop: 'todo_time', type: 'html', code: (row) => {
      return '<span style="color: #F56C6C">' + row.todo_time + '</span>'
    }
  },
  {label: '入学时间', prop: 'ruxue', width: '90px'},
  {label: '意向类型', prop: 'yixiang'},
  {label: '录入人', prop: 'luru', width: '90px'},
  {label: '招生老师', prop: 'zixun', width: '90px', type: 'select'},
  {label: '合作人', prop: 'hezuoren', width: '90px', type: 'text'},
  {label: '学生来源', prop: 'laiyuan'},
  {label: '来源详情', prop: 'laiyuan_xiangqing', type: 'text'},
  {
    label: '待办状态', prop: 'todo_status', width: '100px', type: 'html', code: (row) => {
      if (row.todo_status === '已完成') {
        return '<span style="color: #67C23A">已完成</span>'
      } else if (row.todo_status === '未完成') {
        return '<span style="color: #F56C6C">未完成</span>'
      } else {
        return '<span style="color: #E6A23C">已过期</span>'
      }
    }
  }
],)
const tableOptions = {
  label: '操作',
  width: '130px',
  value: 0,
  options: [
    {
      label: '确认已回访',
      key: 0,
      type: 'text',
      show: (row) => {
        return row.todo_status === '未完成' || row.todo_status === '已过期'
      },
      method: (row) => {
        handleOver(row, 1)
      }
    },
    {
      label: '回访已确认',
      key: 0,
      type: 'text',
      show: (row) => {
        return row.todo_status === '已完成'
      },

    }
  ]
}
const handleOver = (row, type) => {
  ElMessageBox.confirm('一旦确认无法更改,是否提交 ?', '提示', {type: 'warning'}).then(async () => {
    loading.value = true;
    let res = await visitorEdit({student_id: row.student_id, todo_status: type, type: row.type})
    loading.value = false;
    if (res) {
      ElMessage({message: '提交成功', type: 'success'})
      await fetchData()
    }
  })
}
const onSearch = () => {
  pageData.currentPage = 1
  fetchData();
}

let searchRef = ref('')
const handleReset = () => {
  searchRef.value.resetFields()
  searchForm.type = ''
}


const handlePageChange = (param) => {
  pageData.pageSize = param.limit
  pageData.currentPage = param.page
  fetchData()
}

const handleDetail = async (row) => {
  setStorage('backlogForm', searchForm)
  router.push({path: '/backlog/info', query: {student_id: row.student_id, flag: 'backlogFlag'}})
}

let cascaderRef = ref('')
const applyChange = (value) => {
  if (value) {
    searchForm.type = cascaderRef.value.getCheckedNodes()[0].data.type
  } else {
    searchForm.type = ''
  }
}

const fetchData = async () => {
  let params = searchForm
  params.page = pageData.currentPage
  params.limit = pageData.pageSize
  loading.value = true
  let res = await dataList(params)
  loading.value = false
  if (res) {
    tableData.value = res.data.list
    pageData.total = res.data.page.amount
  }
}


</script>

<template>
  <el-row>
    <el-col :span="24">
      <el-form :inline="true" :model="searchForm" class="el-input-form" ref="searchRef">
        <el-form-item label="报考院校" v-show="mobileShow || !mobile" prop="school">
          <el-cascader clearable v-model="searchForm.school" :options="projectTree" ref="cascaderRef"
                       :props="{ checkStrictly: true, emitPath: false }" @change="applyChange"></el-cascader>
        </el-form-item>
        <el-form-item label="学生姓名" prop="realname" v-show="mobileShow || !mobile">
          <el-input clearable placeholder="请输入学生姓名" v-model="searchForm.realname"/>
        </el-form-item>
        <el-form-item label="联系方式" prop="laidian" v-show="mobileShow || !mobile">
          <el-input clearable placeholder="请输入联系方式" v-model="searchForm.laidian">
          </el-input>
        </el-form-item>
        <el-form-item label="入学时间" prop="ruxue" v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.ruxue" placeholder="请选择入学时间" clearable>
            <el-option v-for="(item, index) in optionsBox.ruxue_list" :label="item.name" :value="item.value"
                       :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="意向类型" prop="yixiang" v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.yixiang" placeholder="请选择意向类型" clearable>
            <!--            <el-option label="无" value=""></el-option>-->
            <el-option v-for="(item, index) in optionsBox.yixiang_list" :label="item.name" :value="item.value"
                       :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="招生老师" :prop="teacherOptions.length == 1 ? '' : 'zixun'" v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.zixun" placeholder="请选择招生老师" clearable
                     :disabled="teacherOptions.length == 1 ? true : false">
            <el-option v-for="(item, index) in teacherOptions" :label="item.name" :value="item.name"
                       :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生来源" prop="laiyuan" v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.laiyuan" placeholder="请选择学生来源">
            <el-option v-for="(item, index) in optionsBox.laiyuan_list" :label="item.name" :value="item.value"
                       :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-show="mobile" plain @click="mobileShow = !mobileShow">{{
              mobileShow ? '取消高级查询' : '高级查询'
            }}
          </el-button>
          <el-button type="primary" plain @click="onSearch" icon="search">查询</el-button>
          <el-button @click="handleReset" icon="RefreshRight">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24">
      <el-tabs type="border-card" v-model="searchForm.tab" @tab-change="onSearch">
        <el-tab-pane label="全部" name="1">
          <el-col :span="24" v-loading="loading">
            <tableList :table-data="tableData"
                       :table-header="tableHeader"
                       :page-data="pageData"
                       :table-options="tableOptions"
                       @handle-page-change="handlePageChange"></tableList>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="待办" name="3">
          <el-col :span="24" v-loading="loading">
            <tableList :table-data="tableData"
                       :table-header="tableHeader"
                       :page-data="pageData"
                       :table-options="tableOptions"
                       @handle-page-change="handlePageChange"></tableList>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="已办" name="2">
          <el-col :span="24" v-loading="loading">
            <tableList :table-data="tableData"
                       :table-header="tableHeader"
                       :page-data="pageData"
                       :table-options="tableOptions"
                       @handle-page-change="handlePageChange"></tableList>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

